<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="title">
          <el-divider content-position="center">标题</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="title.show" :label="true">是</el-radio>
              <el-radio v-model="title.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="距左侧">
               <el-input v-model="title.left" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距右侧">
               <el-input v-model="title.right" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距顶部">
               <el-input v-model="title.top" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距底部">
               <el-input v-model="title.bottom" size="mini"></el-input>
            </el-form-item>
            <el-divider content-position="center">主标题</el-divider>
            <el-form-item label="文本">
              <el-input v-model="title.text" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="颜色">
              <el-color-picker v-model="title.textStyle.color" show-alpha size="small" @active-change="titleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="字体">
               <el-select v-model="title.textStyle.fontFamily" placeholder="normal" size="mini">
                <el-option label="serif" value="serif"/>
                <el-option label="monospace" value="monospace"/>
                <el-option label="Courier New" value="Courier New"/>
                <el-option label="Microsoft YaHei" value="Microsoft YaHei"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="字号">
              <el-input-number v-model="title.textStyle.fontSize" :min="0" :max="100" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="粗细">
              <el-select v-model="title.textStyle.fontWeight" placeholder="normal" size="mini">
                <el-option label="normal" value="normal"/>
                <el-option label="bold" value="bold"/>
                <el-option label="bolder" value="bolder"/>
                <el-option label="lighter" value="lighter"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="行高">
              <el-input-number v-model="title.textStyle.lineHeight" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="边框颜色" v-if="title.textStyle.textBorderColor">
              <el-color-picker v-model="title.textStyle.textBorderColor" show-alpha size="small" @active-change="titleTextBorderColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="边框宽度" v-if="title.textStyle.textBorderWidth">
              <el-input-number v-model="title.textStyle.textBorderWidth" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="阴影颜色" v-if="title.textStyle.textShadowColor">
              <el-color-picker v-model="title.textStyle.textShadowColor" show-alpha size="small" @active-change="titleTextShadowColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="阴影模糊" v-if="title.textStyle.textShadowBlur">
              <el-input-number v-model="title.textStyle.textShadowBlur" :min="2" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="阴影水平偏移" v-if="title.textStyle.textShadowOffsetX">
              <el-input-number v-model="title.textStyle.textShadowOffsetX" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="阴影垂直偏移" v-if="title.textStyle.textShadowOffsetY">
              <el-input-number v-model="title.textStyle.textShadowOffsetY" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item label="主副标题间距">
               <el-input-number v-model="title.itemGap" :min="0" :max="50" label="描述文字" size="mini"></el-input-number>
            </el-form-item>
            <el-divider content-position="center">副标题</el-divider>
            <el-form-item label="文本">
              <el-input v-model="title.subtext" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="颜色">
              <el-color-picker v-model="title.subtextStyle.color" show-alpha size="small" @active-change="subColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="字体">
               <el-select v-model="title.subtextStyle.fontFamily" placeholder="normal" size="mini">
                <el-option label="serif" value="serif"/>
                <el-option label="monospace" value="monospace"/>
                <el-option label="Courier New" value="Courier New"/>
                <el-option label="Microsoft YaHei" value="Microsoft YaHei"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="字号">
                <el-input-number v-model="title.subtextStyle.fontSize" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="粗细">
              <el-select v-model="title.subtextStyle.fontStyle" placeholder="normal" size="mini">
                <el-option label="normal" value="normal"/>
                <el-option label="bold" value="bold"/>
                <el-option label="bolder" value="bolder"/>
                <el-option label="lighter" value="lighter"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="行高">
              <el-input-number v-model="title.subtextStyle.lineHeight" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="边框颜色">
              <el-color-picker v-model="title.subtextStyle.textBorderColor" show-alpha size="small" @active-change="subTextBorderColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="边框宽度">
              <el-input-number v-model="title.subtextStyle.textBorderWidth" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="阴影颜色">
              <el-color-picker v-model="title.subtextStyle.textShadowColor" show-alpha size="small" @active-change="subTextShadowColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="阴影模糊">
              <el-input-number v-model="title.subtextStyle.textShadowBlur" :min="2" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="阴影水平偏移">
              <el-input-number v-model="title.subtextStyle.textShadowOffsetX" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="阴影垂直偏移">
              <el-input-number v-model="title.subtextStyle.textShadowOffsetY" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-divider content-position="center"></el-divider>
            <el-form-item  label="背景色" v-if="title.backgroundColor">
              <el-color-picker v-model="title.backgroundColor" show-alpha size="small" @active-change="backgroundColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="边框颜色" v-if="title.borderColor">
              <el-color-picker v-model="title.borderColor" show-alpha size="small" @active-change="borderColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="边框宽度" v-if="title.borderWidth">
              <el-input-number v-model="title.borderWidth" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="边框圆角" v-if="title.borderRadius">
              <el-input-number v-model="title.borderRadius" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="阴影颜色" v-if="title.shadowColor">
              <el-color-picker v-model="title.shadowColor" show-alpha size="small" @active-change="shadowColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="阴影模糊" v-if="title.shadowBlur">
              <el-input-number v-model="title.shadowBlur" :min="2" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="阴影水平偏移" v-if="title.shadowOffsetX">
              <el-input-number v-model="title.shadowOffsetX" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="阴影垂直偏移" v-if="title.shadowOffsetY">
              <el-input-number v-model="title.shadowOffsetY" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
    }
  },
  methods: {
    backgroundColor (val) {
      this.title.backgroundColor = val
    },
    borderColor (val) {
      this.title.borderColor = val
    },
    shadowColor (val) {
      this.title.shadowColor = val
    },
    titleColor (val) {
      this.title.textStyle.color = val
    },
    titleTextBorderColor (val) {
      this.title.textStyle.textBorderColor = val
    },
    titleTextShadowColor (val) {
      this.title.textStyle.textShadowColor = val
    },
    subColor (val) {
      this.title.subtextStyle.color = val
    },
    subTextBorderColor (val) {
      this.title.subtextStyle.textBorderColor = val
    },
    subTextShadowColor (val) {
      this.title.subtextStyle.textShadowColor = val
    }
  },
  computed: {
    title () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.title
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>

<style scoped>

</style>
